/**
 * @author lvzhiyi
 *
 * @description Toast提示插件
 */
import React from 'react';
import ReactDOM from 'react-dom';

import '../../utils/animate.css';
import './style.less';

function MyContainer({ msg, animate }: any) {
    return (
        <div className="toast">
            <div className={`${animate} animated toast-content`}>{msg}</div>
        </div>
    );
}

let config = {};

const Toast = (
    msg = config.msg,
    animate = config.animate || 'bounce',
    timer = config.timer || 3000
) => {
    const doc = window.document;
    const node = doc.createElement('div');
    doc.body.appendChild(node);
    ReactDOM.render(<MyContainer msg={msg} animate={animate} />, node, () => {
        const toastNode = node.getElementsByTagName('div')[0];
        toastNode.style.animation = `toastAnimate ${timer + 500}ms`;
        setTimeout(() => {
            window.document.body.removeChild(node);
        }, timer);
    });
    return;
};

Toast.config = data => Object.assign(config, data);

export default Toast;
